import React from "react";
import { Card, Row, Col, Space } from "antd";
import Echarts from "./echarts";
import styles from "./index.module.scss";

import {
  RiseOutlined,
  UserAddOutlined,
  ShoppingCartOutlined,
} from "@ant-design/icons";

export default function Home() {
  return (
    <div className={styles.root}>
      <Row gutter={[24, 48]}>
        <Col span={4}>
          <Card style={{ width: 200, height: 200 }}>
            <Space className="home-icon">
              <RiseOutlined />
            </Space>
            <p>0</p>
            <h5>今日访问量</h5>
          </Card>
        </Col>
        <Col span={4}>
          <Card style={{ width: 200, height: 200 }}>
            <Space className="home-icon">
              <UserAddOutlined />
            </Space>
            <p>0</p>
            <h5>新增用户量</h5>
          </Card>
        </Col>
        <Col span={4}>
          <Card style={{ width: 200, height: 200 }}>
            <Space className="home-icon">
              <ShoppingCartOutlined />
            </Space>
            <p>0</p>
            <h5>今日购买量</h5>
          </Card>
        </Col>
        <Col span={12}>
          <Card style={{ width: 600, height: 200 }}>
            <Row>
              <Col span={3}></Col>
              <Col span={5}>课程访问量</Col>
              <Col span={5}>课程购买量</Col>
              <Col span={5}>听课人数</Col>
              <Col span={5}>机构数</Col>
            </Row>
            <Row>
              <Col span={3}>总量</Col>
              <Col span={5}>0</Col>
              <Col span={5}>0</Col>
              <Col span={5}>0</Col>
              <Col span={5}>0</Col>
            </Row>
            <Row>
              <Col span={3}>昨日</Col>
              <Col span={5}>0</Col>
              <Col span={5}>0</Col>
              <Col span={5}>0</Col>
              <Col span={5}>0</Col>
            </Row>
          </Card>
        </Col>
      </Row>
      <Row gutter={[24, 24]} className="home-echarts-box">
        <Col span={24}>
          <Card style={{ width: 1415.55, height: 500 }}>
            <Echarts></Echarts>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
